<nz-drawer [nzBodyStyle]="{ height: 'calc(100% - 55px)', overflow: 'hidden', padding: '0px', display: 'grid', 'grid-template-rows': '1fr auto'}" [nzMaskClosable]="false" [nzWidth]="'640px'"
           [nzVisible]="visible" [nzTitle]="'购物清单'" (nzOnClose)="close()">

    <div class="panel panel-grid" *nzDrawerContent>
        <div class="panel-body">
            <div class="list">
                <div class="list-header" style="margin-top: 10px;">
                    <nz-form-item>
                        <nz-form-label [nzSpan]="6">选择客户</nz-form-label>
                        <nz-form-control [nzSpan]="14">
                            <nz-select name="customer" style="width: 100%;" [(ngModel)]="customer" nzPlaceHolder="选择" nzShowSearch [compareWith]="compareObject">
                                <ng-container *ngFor="let c of customers">
                                    <nz-option [nzValue]="c" [nzLabel]="c.name"></nz-option>
                                </ng-container>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div class="list-body">
                    <div class="list-grid-item" *ngFor="let item of cartService.orders">
                        <img class="list-grid-item-image" [src]="item.product.pictures && item.product.pictures.length > 0 ? configService.api.download_api + '/' + item.product.pictures[0].auto_name : 'assets/img/default/dummy.png'"/>
                        <div class="list-grid-item-text">
                            <span class="list-grid-item-name">{{item.product.name}}</span>
                            <span class="list-grid-item-code text-primary">编码 {{item.product.code}}</span>
                            <span class="list-grid-item-amount">库存 {{item.product.amount}}</span>
                        </div>
                        <input type="number" nz-input class="list-grid-item-price text-danger" [(ngModel)]="item.price" />
                        <input type="number" nz-input class="list-grid-item-count" [(ngModel)]="item.amount" />
                        <button nz-button nzType="primary" nzDanger nzSize="small" (click)="cartService.remove(item.product)"> <i nz-icon nzType="delete"></i></button>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-footer" style="padding: 20px;">
            <div class="panel-footer-left">
                <span class="text-danger" style="font-size: 24px;">总价：{{cartService.total()}}</span>
                <nz-switch name="paid" style="align-self: center;" [(ngModel)]="paid" nzCheckedChildren="已支付" nzUnCheckedChildren="未支付"></nz-switch>
            </div>
            <div class="panel-footer-right">
                <button nz-button nzType="default" (click)="close()">关闭</button>
                <button nz-button nzType="primary" (click)="submit()" [disabled]="!customer || !cartService.count()">提交</button>
            </div>
        </div>
    </div>
</nz-drawer>
